<template>
	<div class="containner">
		<!-- 搜索 -->
		<div>

		</div>
		<!-- 地图 -->
		<div class="map-box">
			<map id="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" scale="16"
				controls="controls" enable-building show-location enable-overlooking @regionchange="regionchange">
				<cover-image class="cover-image" src="/static/icon/dianwei.png" />
				<cover-image class="cover-redw" src="/static/icon/redw.png" @click="getNowAddress" />
			</map>
		</div>
		<!-- 地址选择 -->
		<div class="addresslist">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="scroll-view-item addressItem" v-for="(item,index) in poiss" :key="index"
					@click="clickItem(item)">
					<div class="addressinfo">
						<div class="title">{{item.title}}</div>
						<div class="distance">{{item.distance}}</div>
					</div>
					<div class="distance">{{item.address}}</div>
				</view>
			</scroll-view>
		</div>
	</div>
</template>

<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk.js';
	import {
		toast
	} from '../../utils/common';
	// 腾讯地图Api
	const qqMapsdk = new QQMapWX({
		key: 'ZXUBZ-PTG3W-C5ERB-OIVDN-P7PKF-PPFS5' //这里填写自己申请的key
	});
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				poiss: [],
				address: '',
			}
		},
		mounted() {
			// this.getNowAddress()
			try {
				uni.showLoading({
					title: '正在获取定位中',
				});
				let that = this
				uni.getLocation({
					type: "gcj02",
					// isHighAccuracy: true,
					// geocode:'true',
					success(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						let location = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						uni.hideLoading();
						// that.getAddresslist(that.latitude, that.longitude);
					},
					fail(err) {
						toast('定位失败')
					},
				});
			} catch {

			}
		},
		onReady() {
			this.getLngLat()
		},
		methods: {
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			moveTolocation() {
				let mapObjs = uni.createMapContext('map', this)
				mapObjs.moveToLocation({
					complete: res => {
						// console.log('移动完成:', res)
					}
				})
				// this.onRegionChange('',true)
			},
			//获取中间点的经纬度，并mark出来
			getLngLat() {
				var that = this;
				this.mapCtx = wx.createMapContext("map");
				this.mapCtx.getCenterLocation({
					success: function(res) {
						// that.setData({
						// 	markers: [{
						// 		id: 0,
						// 		iconPath: "/static/icon/dianwei.png",
						// 		longitude: res.longitude,
						// 		latitude: res.latitude,
						// 		width: 40,
						// 		height: 40
						// 	}]
						// })
						that.getAddresslist(res.longitude, res.latitude)
					}
				})
			},
			// 获取定位  位置信息
			getNowAddress() {
				let that = this
				return new Promise((res, rej) => {
					//位置信息默认数据
					uni.getLocation({
						type: "gcj02",
						isHighAccuracy: true,
						// geocode:'true',
						success(res) {
							that.latitude = res.latitude
							that.longitude = res.longitude
							let location = {
								longitude: res.longitude,
								latitude: res.latitude
							}
							that.getAddresslist(that.longitude, that.latitude);
							that.moveTolocation()
						},
						fail(err) {
							toast('定位失败')
						},
					});
				})
			},
			regionchange(e) {
				var th_is = this;
				if (e.type == "end") {
					th_is.getLngLat();
				}
			},
			// 获取附近详细
			getAddresslist(longitude, latitude) {
				let location = [latitude, longitude]
				let StringLocation = location.toString();
				var th_is = this;
				qqMapsdk.reverseGeocoder({
					location: StringLocation,
					get_poi: 1,
					// poi_options: 'policy=1;page_size=20;page_index=1',
					success: res => {
						let pi = res.result.pois;
						th_is.address = res.result.pois.length > 0 ? res.result.pois[0] : {};
						for (let s of pi) {
							let o = th_is.distance(latitude, longitude, s.location.lat, s.location.lng);
							s.distance = o.distance_str
						}
						th_is.poiss = pi
					},
					fail: err => {
						uni.showToast({
							title: err.message,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 
			rad(d) {
				return d * Math.PI / 180.0;
			},
			//根据金纬度计算距离
			distance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.rad(lat1);
				var radLat2 = this.rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.rad(lng1) - this.rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				// 输出为公里
				s = Math.round(s * 10000) / 10000;

				var distance = s;
				var distance_str = "";

				if (parseInt(distance) >= 1) {
					// distance_str = distance.toFixed(1) + "km";
					distance_str = distance.toFixed(2) + "km";
				} else {
					// distance_str = distance * 1000 + "m";
					distance_str = (distance * 1000).toFixed(2) + "m";
				}
				//小小修改，这里返回对象
				let objData = {
					distance: distance,
					distance_str: distance_str
				}
				return objData
			},
			clickItem(item) {
				
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				let object = {
					obj:item
				};
				prevPage.$vm.otherFun(object)// 給上一頁綁定方法otherFun,傳參object
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
				// console.log(item);
				// uni.$emit('address', item);
				// // uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containner {
		height: 100vh;
	}

	.cover-image {
		width: 62rpx;
		height: 62rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.map-box {
		height: 30vh;
	}

	.addresslist {
		height: 70vh;
		background-color: #fff;
		overflow: hidden;

		.scroll-Y {
			height: 65vh;
		}
	}

	.addressItem {
		padding: 20upx 30upx;
		border-bottom: 1upx solid #ccc;

		.addressinfo {
			display: flex;
			justify-content: space-between;
		}

		.title {
			font-size: 28upx;
		}

		.distance {
			font-size: 22upx;
			color: #ccc;
		}
	}

	.cover-redw {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		position: absolute;
		right: 20upx;
		bottom: 20upx;
	}
</style>